<template>
	<view class="chat">
		<scroll-view class="scroll-view" :style="{height: `${windowHeight-inputHeight}rpx`}" id="scrollview"
			scroll-y="true" :scroll-top="scrollTop" @scrolltoupper="topRefresh" @click="touchClose">
			<view id="msglistview" class="chat-body">
				<u-loading-icon v-if="loading" />
				<view style="font-size: 30rpx; display: flex; justify-content: center;">来自漂流瓶：{{paperContent}}</view>
				
				<view v-for="(item,index) in msgList" :key="index">
					<view class="msg-time" v-if="item.isShowTime">
						{{item.timestamp | weChatTimeFormat }}
					</view>
					<view class="item self" v-if="item.senderId == currentUser.uuid">
						<view class="msg-menu menu-right" :style="{display: showBoxId==item.messageId?'block':'none'}">
							<view class="tr-icon tr-icon-right"></view>
							<chatMsgMenu :msgUserId="item.senderId" :msgId="item.id" :content="item.payload"
								:msgSortId="index" :time="item.sendTime" :message="item" @cancelMsg="cancelMsg" />
						</view>
						<view  @longpress="showBoxId=item.messageId">
							<view class="content-text right" v-if="item.type=='text'">
								{{item.payload.text}}
							</view>
							<view class="content-text right" v-else-if="item.type=='audio'">
								<view style="display: flex;" @click="playSound(item.payload.url)">
									<text>{{Math.round(item.payload.duration)}}"</text>
									<image style="width: 42rpx;height: 42rpx;" :src="imgConf.replayChange" />
								</view>
							</view>
							<view class="content-img" v-else-if="item.type=='image'">
								<image class="img-style" :src="item.payload.url" mode="widthFix" :lazy-load="true" />
							</view>
							<view class="content-video" v-else>
								<video class="video-style" :src="item.payload" />
							</view>
						</view>
						<image class="avatar" :src="currentUser.avatar" />
					</view>
					<view class="item Ai" v-else>
						<image class="avatar" :src="friend.avatar" />
						<view @longpress="showBoxId=item.id">
							<view class="content-text left" v-if="item.type=='text'">
								{{item.payload.text}}
							</view>
							<view class="content-text le  ft" v-else-if="item.type=='audio'">
								<view style="display: flex;" @click="playSound(item.payload.url)">
									<text>{{Math.round(item.payload.duration)}}"</text>
									<image style="width: 42rpx;height: 42rpx;" :src="imgConf.replayChange" />
								</view>
							</view>
							<view class="content-img" v-else-if="item.type=='image'">
								<image class="img-style" :src="item.payload.url" mode="widthFix" :lazy-load="true" />
							</view>
							<view class="content-video" v-else>
								<video class="video-style" :src="item.payload" />
							</view>
						</view>
						<view class="msg-menu menu-left" :style="{display: showBoxId==item.id?'block':'none'}">
							<view class="tr-icon tr-icon-left"></view>
							<chatMsgMenu :msgUserId="item.senderId" :msgId="item.id" :content="item.payload"
								:msgSortId="index" :time="item.sendTime" @cancelMsg="cancelMsg" />
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="chat-bottom" :style="{height: `${inputHeight}rpx`}">
			<view class="send-msg" :style="{bottom:`${keyboardHeight}rpx`}">
				<view class="uni-textarea">
					<image class="icon-style" :src="changeLogUrl" @click="changeInputType" />
					<view class="out_textarea_box">
						<textarea placeholder-class="textarea_placeholder"
							:style="{textAlign:(textareaConf.disabled?'center':'')}" v-model="chatMsg" maxlength="250"
							confirm-type="send" auto-height :placeholder="textareaConf.text" :show-confirm-bar="false"
							:adjust-position="false" :disabled="textareaConf.disabled" @confirm="handleSend"
							@linechange="sendHeight" @focus="focus" @blur="blur" @touchstart="handleTouchStart"
							@touchmove="handleTouchMove" @touchend="handleTouchEnd"
							@keyboardheightchange="handleKeyboardChange" />
					</view>
					<!-- <image class="icon-style" :src="imgConf.emoji" @click="handleSend" /> -->
					<button @click="handleSend" class="send-btn">发送</button>
					<image class="icon-style" :src="imgConf.more" @click="moreMenu" />
				</view>
			</view>
			<view :style="{display:showMoreMenu?'block':'none'}" class="more-menu">
				<view class="inner-box">
					<view class="menu" @click="sendFile('choose','')">
						<view>
							<image class="i-style" :src="imgConf.sendphoto"></image>
							<view class="t-style">照片</view>
						</view>
					</view>
					<view class="menu" @click="sendFile('shoot','')">
						<view>
							<image class="i-style" :src="imgConf.takePhoto"></image>
							<view class="t-style">拍摄</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="voice-mask" v-show="voice.mask">
			<view class="inner-mask">
				<view class="voice-progress-box" :style="{width:`${progressNum}`+'rpx'}">
					<view class="third-icon" />
					<view class="progress-num">
						{{ voice.length }}s
					</view>
				</view>
				<view class="cancel-btn" :class="{cancelBtn:voice.cancel}">
					<image style="width: 60rpx;height: 60rpx;"
						src="http://116.205.133.116:8080/static/app/logo/publicLogo/cancelSend.png"></image>
				</view>
				<view class="show-tips">
					上滑取消发送
				</view>
				<view class="bottom-area">
					<image class="img-style" :src="imgConf.voiceBtn" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import timeMethod from "@/utils/timeMethod.js"; //时间工具类
	import chatMsgMenu from "./components/chatMsgMenu.vue"
	import GoEasy from 'goeasy';
	import weChatTimeFormat from "../../utils/time.js"
	import {
		getPaperContent, isBlackOther, isBlackUser
	} from '../../api/login';
	import {
		imMessage,
		talkAI
	} from "../../api/ai";
	export default {
		components: {
			chatMsgMenu,
		},
		data() {
			return {
				imgConf: { //界面icon图片配置，可自定义
					emoji: "https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/bottle/icon/EMOJI.png",
					more: "https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/bottle/icon/more.png",
					sendphoto: "https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/bottle/icon/image.png",
					sendVideo: "http://xx/static/app/logo/publicLogo/video.png",
					takePhoto: "https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/bottle/icon/takePhote.png",
					voiceBtn: "http://xx/static/app/logo/publicLogo/voiceBtn.png",
					keyboard: "https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/bottle/icon/keyboard-26.png",
					speak: "https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/bottle/icon/speak.png",
					replayChange: "https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/bottle/icon/audio_right.png",
					replay: "https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/bottle/icon/audio_right.png",
					replaing: "https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/bottle/icon/replyChange.png"
				},
				changeLogUrl: "https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/bottle/icon/speak.png",
				loading: false,
				keyboardHeight: 0,
				bottomHeight: 0,
				scrollTop: 0,
				chatMsg: "",
				pageSize: 20, //分页数量
				pageNum: 1, //分页开始数
				returnPageNum: "", //接口返回的聊天信息的总页数
				msgList: [], //聊天消息list
				judgeScrollToBottom: true,
				startTime: 0,
				msgID: 0,
				showBoxId: "",
				showBoxUserId: "",
				showMoreMenu: false,
				textareaConf: {
					disabled: false,
					text: ""
				},
				voice: { //语音录制界面配置
					mask: false, //遮罩层
					length: 0, //语音录制时长
					cancel: false, //是否取消发送
					startX: "", //获取
					startY: "",
					timer: "",
					recordInstance: "", //uni语音录制实例
					finished: false //是否已结束录制
				},
				msgConf: {
					showTimeSpace: 600 //消息隔多长时间才展示
				},
				paperContent: '',
				currentUser: {},
				friend: {
					uuid: '',
					avatar: '',
					username: '',
					gender: 0
				},
				black: {
					isblack: false,
					blackMsg: ''
				}
			}
		},
		updated() {
			//页面更新时调用聊天消息定位到最底部
			if (this.judgeScrollToBottom) {
				this.scrollToBottom();
			}
		},
		computed: {
			//获取窗口页面高度
			windowHeight() {
				return this.rpxTopx(uni.getSystemInfoSync().windowHeight);
			},

			// 键盘弹起来的高度+发送框高度
			inputHeight() {
				return this.bottomHeight + this.keyboardHeight;
			},

			//语音录制时进度条
			progressNum() {
				return this.voice.length * 2 + 250;
			}

		},
		onLoad(option) {
			// //创建录音实例
			this.voice.recordInstance = uni.getRecorderManager();

			const item = JSON.parse(decodeURIComponent(option.item));
			if (item) {
				console.log('uuid', uni.getStorageSync('uuid'))
				this.friend.uuid = uni.getStorageSync("uuid") === item.lastMessage.senderId ? item.lastMessage
					.receiverId : item.lastMessage.senderId
				this.friend.avatar = item.data.avatar
				this.friend.username = item.data.nickname
				uni.setNavigationBarTitle({
					title: item.data.nickname ? item.data.nickname : "抖音用户"
				});
				getPaperContent({
					sender_uuid: this.friend.uuid,
					accept_id: uni.getStorageSync("userId")
				}).then(res => {
					this.paperContent = res.data
					this.paperContent = this.truncateString(res.data, 15)
				}).catch(err => {
					this.paperContent = ''
					console.log("获取两人之间的漂流瓶错误", err)
				})
			}
			this.currentUser = uni.getStorageSync("userInfo")

			//获取历史消息
			this.getHistoryMessage()
			let that = this
			var onMessageReceived = function(message) {
				let senderId = message.senderId
				let receiverId = message.receiverId
				let friendId = uni.getStorageSync("uuid") === senderId ? receiverId : senderId
				if (friendId === that.friend.uuid) {
					that.msgList.push(message)
					//聊天时收到消息标记为已读
					//收到消息时滚动到最底部
					that.scrollToBottom
				}
			};
			//监听和接收单聊消息
			this.goEasy.im.on(GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, onMessageReceived);
			//标记消息为已读
			this.goEasy.im.markMessageAsRead({
				id: that.friend.uuid,
				type: GoEasy.IM_SCENE.PRIVATE, //群聊：GoEasy.IM_SCENE.GROUP, 客服消息：GoEasy.IM_SCENE.CS,
				onSuccess: function() {
					console.log('标记私聊已读成功');
				},
				onFailed: function(error) {
					console.log('标记私聊已读失败', error);
				},
			});
			this.isBlackOthers()
		},
		onUnload() {
			let that = this
			var onMessageReceived = function(message) {
				let senderId = message.senderId
				let receiverId = message.receiverId
				let friendId = uni.getStorageSync("uuid") === senderId ? receiverId : senderId
				if (friendId === that.friend.uuid) {
					that.msgList.push(message)
					//聊天时收到消息标记为已读
					//收到消息时滚动到最底部
					that.scrollToBottom
				}
			};
			// 取消监听
			this.goEasy.im.off(GoEasy.IM_EVENT.MESSAGE_DELETED, onMessageReceived);
		},
		methods: {
			//下拉刷新,分页用的
			topRefresh() {
				if (this.pageNum < this.returnPageNum) {
					this.pageNum++;
					this.judgeScrollToBottom = false;
					this.loading = true;
					//调用消息接口，拉去消息
					// this.getHistoryMessage()
				}
			},
			//字符串超过指定长度用省略号显示
			truncateString(str, maxLength) {
				if (str.length <= maxLength) {
					return str;
				} else {
					return str.substring(0, maxLength - 1) + '...';
				}
			},

			//消息时间展示
			showMsgTime(data) {
				data.forEach(e => {
					e.isShowTime = false; //时间显示打标
					var sendTime = timeMethod.timestampToTime(e.timestamp)
					e.sendTime = timeMethod.timeFormat(sendTime, "T");
					this.msgID++; //消息id计数，定位消息list的索引
					if (this.startTime != 0) { //第一条消息前面没时间，排出掉
						if ((e.timestamp - this.startTime) / 1000 > this.msgConf.showTimeSpace) { //计算消息时间间隔大于120秒	
							e.isShowTime = true //注入打标数据
						}
					}
					this.startTime = e.timestamp; //每次循环记住该条消息时间，用于计算消息之间时间间隔
					this.msgList.push(e); //处理好数据后push进消息list
				})
				//消息列表最上面一条显示时间
				if (this.pageNum == this.returnPageNum) {
					this.msgList[0].isShowTime = true;
				}
			},

			//获取用户信息，这儿获取聊天好友的用户信息
			getUserInfo() {
				this.$request("/sys/getUserName", "POST", {
					"userId": this.userId,
					"toUserId": this.toUserId
				}, {
					"Content-Type": "application/x-www-form-urlencoded"
				}).then(res => {
					let data = res.data.data;
					this.userHeadImg = data[0].headImg;
					this.toUserHeadImg = data[1].headImg;
					uni.setNavigationBarTitle({
						title: data[1].nickName
					})
				})
			},

			//输入框聚焦
			focus() {
				this.scrollToBottom();
			},

			//输入框取消聚焦
			blur() {
				this.scrollToBottom();
			},

			// px转换成rpx
			rpxTopx(px) {
				let deviceWidth = uni.getSystemInfoSync().windowWidth;
				let rpx = (750 / deviceWidth) * Number(px);
				return Math.floor(rpx);
			},

			// 监视聊天发送栏高度
			sendHeight() {
				setTimeout(() => {
					let query = uni.createSelectorQuery();
					query.select('.send-msg').boundingClientRect();
					query.exec(res => {
						this.bottomHeight = this.rpxTopx(res[0].height);
					})
				}, 200)
			},

			// 滚动至聊天底部
			scrollToBottom(e) {
				setTimeout(() => {
					let query = uni.createSelectorQuery().in(this);
					query.select('#scrollview').boundingClientRect();
					query.select('#msglistview').boundingClientRect();
					query.exec((res) => {
						if (res[1].height > res[0].height) {
							this.scrollTop = this.rpxTopx(res[1].height - res[0].height);
						}
					})
				}, 200);
			},

			isEmpty(input) {
				return input === null || input === undefined || input === '';
			},
			// 发送消息
			handleSend() {
				this.judgeScrollToBottom = true;
				this.pageNum = 1;
				//如果消息不为空
				if (!this.isEmpty(this.chatMsg)) {
					if(this.black.isblack == true) {
						uni.showToast({
							title: this.black.blackMsg,
							duration: 2000,
							icon: "none"
						})
						return 
					}
					let that = this
					//goEasy发送消息
					var im = this.goEasy.im
					//创建消息, 内容最长不超过3K，可以发送字符串，对象和json格式字符串
					let textMessage = im.createTextMessage({
						text: this.chatMsg, //消息内容
						to: {
							type: GoEasy.IM_SCENE.PRIVATE, //私聊还是群聊，群聊为GoEasy.IM_SCENE.GROUP
							id: that.friend.uuid, //接收方用户id
							data: {
								"avatar": that.friend.avatar,
								"nickname": that.friend.username
							} //接收方用户扩展数据, 任意格式的字符串或者对象，用于更新会话列表conversation.data
						}
					});

					//发送消息
					im.sendMessage({
						message: textMessage,
						onSuccess: function(message) { //发送成功
							console.log("Private message sent successfully.", message);
							that.msgList.push(message) //todo:这个地方不用push吧
						},
						onFailed: function(error) { //发送失败
							console.log('Failed to send private message，code:' + error.code + ' ,error ' +
								error.content);
						}
					});
					//机器人的uuid
					if (this.friend.uuid == 'd7226d01-fa84-4806-ab58-ae279bd3b367' || this.friend.uuid == '869dc0b7-660a-4747-a033-462afebb6ce7') {
						this.sendToRabbit()
					}
					this.chatMsg = '';
				} else {
					uni.showToast({
						title: "不能发送空白消息",
						icon: 'none',
						duration: 1000
					})
				}
			},
			//给大模型发送内容
			async sendToRabbit() {
				let params = {
					input: {
						prompt: this.chatMsg
					}
				}
				talkAI(params).then(res => {
					let answerMsg = res.output.text
					//goEasy发送消息
					let imParams = {
						appkey: "BC-85c4b28d6f1e4126a13a804f4e9a34a3",
						senderId: "d7226d01-fa84-4806-ab58-ae279bd3b367",
						senderData: {
							"avatar": this.friend.avatar,
							"nickname": this.friend.username
						},
						to: {
							"type": "private",
							"id": uni.getStorageSync("uuid"),
							"data": {
								"avatar": this.currentUser.avatar,
								"nickname": this.currentUser.username
							}
						},
						type: "text",
						payload: answerMsg,
					}
					imMessage(imParams).then(res => {
						console.log("im发送消息成功", res)
					}).catch(err => {
						console.log("发送消息失败", err)
					})
					return
				}).catch(err => {
					console.log("这是error", err)
				})
			},

			//已读消息
			readedMsg() {
				// this.$request("/msg/readedMsg","GET",{"sendUserId":this.toUserId,"acceptUserId":this.userId})
			},

			//语音播放
			playSound(url) {
				this.imgConf.replayChange = this.imgConf.replaing;
				let music = null;
				music = uni.createInnerAudioContext();
				music.src = url;
				music.play();
				music.onError((res) => {
					console.log(res.errCode, res.errMsg)
				})
				music.onEnded(() => {
					music = null;
					this.imgConf.replayChange = this.imgConf.replay;
				})

			},

			//msglist索引-删除消息list中的元素
			cancelMsg(id) {
				//自定义的移除list元素的方法
				Array.prototype.remove = function(dx) {
					if (isNaN(dx) || dx > this.length) {
						return false;
					}
					for (var i = 0, n = 0; i < this.length; i++) {
						if (this[i] != this[dx]) {
							this[n++] = this[i]
						}
					}
					this.length -= 1
				}
				//直接调用移除消息list中的元素
				this.msgList.remove(id);
			},

			//语音图标切换
			changeInputType() {
				if (this.changeLogUrl == this.imgConf.speak) {
					this.changeLogUrl = this.imgConf.keyboard;
					this.textareaConf.disabled = true;
					this.textareaConf.text = "按住说话";
					this.chatMsg = "";
				} else {
					this.changeLogUrl = this.imgConf.speak;
					this.textareaConf.disabled = false;
					this.textareaConf.text = "";
				}
			},

			//全局点击关闭
			touchClose() {
				this.showBoxId = "";
				this.showMoreMenu = false;
				this.keyboardHeight = 0;
			},

			//更多菜单
			moreMenu() {
				this.keyboardHeight = 300;
				let timer = setTimeout(() => {
					this.showMoreMenu = true;
				}, 100);
			},


			// 开始录制语音
			handleTouchStart(e) {
				var that = this;
				if (this.textareaConf.disabled) {
					that.voice.finished = false; //手指离开按钮打标
					uni.getSetting({
						success(res) {
							if (res.authSetting['scope.record'] === undefined) {
								console.log("第一次授权")
							} else if (!res.authSetting['scope.record']) {
								uni.showToast({
									icon: "none",
									title: "点击右上角···进入设置开启麦克风授权！",
									duration: 2000
								})
							} else {
								that.voice.recordInstance.start();
								that.voice.mask = true;
								that.voice.isRecord = true;
								that.voice.length = 1;
								that.voice.startX = e.touches[0].pageX;
								that.voice.startY = e.touches[0].pageY;
								that.voice.timer = setInterval(() => {
									that.voice.length += 1;
									if (that.voice.length >= 60) {
										clearInterval(that.voice.timer);
										that.handleTouchEnd();
									}
								}, 1000)
								//判断先结束按钮但是录制才开始时不会结束录制的条件；因为获取授权这儿存在延时；所以结束录制时可能还没开始录制
								if (that.voice.finished && that.voice.mask) {
									that.handleTouchEnd();
								}
							}
						}
					})
				}
			},


			// 语音录制时滑动事件
			handleTouchMove(e) {
				if (this.textareaConf.disabled) {
					if (this.voice.startY - e.touches[0].pageY > 100) {
						this.voice.cancel = true;
					} else {
						this.voice.cancel = false;
					}
				}
			},

			// 语音录制结束
			handleTouchEnd() {
				if (this.textareaConf.disabled) {
					this.voice.finished = true;
					this.voice.mask = false;
					clearInterval(this.voice.timer);
					this.voice.recordInstance.stop();
					this.voice.recordInstance.onStop((res) => {
						const message = {
							voice: res.tempFilePath,
							length: this.voice.length
						}
						if (!this.voice.cancel) {
							if (this.voice.length > 1) {
								this.sendFile("voice", res);
								this.sendOtherMessage(res, 'audio')
							} else {
								uni.showToast({
									icon: 'none',
									title: "语音时间太短",
									duration: 1000
								})
							}
						} else {
							this.voice.cancel = false;
						}
					})
				}
			},

			//发送文件
			sendFile(type, data) {
				var that = this;
				if (type == "choose") {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function(res) {
							that.sendOtherMessage(res.tempFiles[0], 'image')
						}
					});
				} else if (type == "shoot") {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['camera'], //从相册选择
						success: function(res) {
							that.sendOtherMessage(res.tempFiles[0], 'image')
						}
					});

				}
			},

			sendOtherMessage(file, type) {
				var that = this
				var im = this.goEasy.im
				switch (type) {
					case 'image':
						//图片消息 
						var message = im.createImageMessage({
							file: file, //H5获得的图片file对象，Uniapp和小程序调用chooseImage，success时得到的res.tempFiles数组中的元素，比如res.tempFiles[0]即为选择的第一张图片
							to: {
								type: GoEasy.IM_SCENE.PRIVATE, //私聊还是群聊，群聊为GoEasy.IM_SCENE.GROUP
								id: that.friend.uuid,
								data: {
									"avatar": that.friend.avatar,
									"nickname": that.friend.username
								} //接收方用户扩展数据, 任意格式的字符串或者对象，用于更新会话列表conversation.data
							},
							onProgress: function(event) {
							} //获取上传进度
						});
						break;
					case 'audio':
						//语音消息
						var message = im.createAudioMessage({
							file: file, //H5的视频file对象，Uniapp和小程序中录音组件RecorderManager.onStop得到的res对象
							to: {
								type: GoEasy.IM_SCENE.PRIVATE, //私聊还是群聊，群聊为GoEasy.IM_SCENE.GROUP
								id: that.friend.uuid,
								data: {
									"avatar": that.friend.avatar,
									"nickname": that.friend.username
								} //接收方用户扩展数据, 任意格式的字符串或者对象，用于更新会话列表conversation.data

							},
							onProgress: function(event) {
							} //获取上传进度
						});
						break;
				}

				//发送单聊消息
				im.sendMessage({
					message: message,
					onSuccess: function(message) { //发送成功
						that.msgList.push(message)
					},
					onFailed: function(error) { //发送失败
						console.log('Failed to send message，code:' + error.code + ',error' + error.content);
					}
				});
			},


			//获取历史消息
			getHistoryMessage() {
				let that = this
				this.goEasy.im.history({
					id: that.friend.uuid,
					type: GoEasy.IM_SCENE.PRIVATE,
					lastTimestamp: null, //上次查询结果里最后一条消息的时间戳，首次查询传入null即可
					limit: 30, //可选项，返回的消息条数，默认为10条，最多30条
					onSuccess: function(result) {
						that.showMsgTime(result.content);
						that.loading = false;
					},
					onFailed: function(error) { //获取失败
						console.log("Failed to query private message, code:" + error.code + " content:" + error
							.content);
					},
				})
			},
			handleKeyboardChange(e) {
				this.$nextTick(() => {
					this.keyboardHeight = this.rpxTopx(e.detail.height);
					if (this.keyboardHeight <= 0) {
						this.keyboardHeight = 0;
						this.showMoreMenu = false;
					}
				})
			},
			isBlackOthers() {
				isBlackOther({
					userId: uni.getStorageSync("userId"),
					otherUUID: this.friend.uuid
				}).then(res => {
					this.black.isblack = true
					this.black.blackMsg = res.msg
				}).catch(err => {
					this.black = {isblack:false, blackMsg: ""}
				})
			}
		}
	}
</script>
<style lang="scss">
	$chatContentbgc: #C2DCFF;
	$sendBtnbgc: #4F7DF5;

	center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 聊天消息 */
	.chat {

		.topTabbar {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			display: flex;
			margin-top: 80rpx;
			justify-content: space-between;

			.icon {
				margin-left: 20rpx;
			}

			.text {
				margin: auto;
				font-size: 16px;
				font-weight: 700;
			}

			.button {
				width: 10%;
				margin: auto 20rpx auto 0rpx;
			}
		}

		.scroll-view {
			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
				z-index: 0;
			}

			background-color: #F6F6F6;

			.chat-body {
				display: flex;
				flex-direction: column;
				padding-top: 23rpx;


				.self {
					justify-content: flex-end;
					position: relative;
				}

				.Ai {
					position: relative;
				}

				.item {
					display: flex;
					padding: 23rpx 30rpx;

					.right {
						background-color: $chatContentbgc;
					}

					.left {
						background-color: #FFFFFF;
					}

					.right::after {
						position: absolute;
						display: inline-block;
						content: '';
						width: 0;
						height: 0;
						left: 100%;
						top: 10px;
						border: 12rpx solid transparent;
						border-left: 12rpx solid $chatContentbgc;
					}

					.left::after {
						position: absolute;
						display: inline-block;
						content: '';
						width: 0;
						height: 0;
						top: 10px;
						right: 100%;
						border: 12rpx solid transparent;
						border-right: 12rpx solid #FFFFFF;
					}

					.content-text {
						position: relative;
						max-width: 486rpx;
						border-radius: 8rpx;
						word-wrap: break-word;
						padding: 24rpx 24rpx;
						margin: 0 24rpx;
						border-radius: 5px;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 42rpx;
					}

					.content-img {
						margin: 0 24rpx;
					}

					.content-video {
						margin: 0 24rpx;
					}

					.img-style {
						width: 400rpx;
						height: auto;
						border-radius: 10rpx;
					}

					.video-style {
						width: 400rpx;
						height: 400rpx;
					}

					.avatar {
						display: flex;
						justify-content: center;
						width: 78rpx;
						height: 78rpx;
						background: $sendBtnbgc;
						border-radius: 50rpx;
						overflow: hidden;

						image {
							align-self: center;
						}
					}

					.msg-menu {
						min-width: 100rpx;
						height: 100rpx;
						display: none;
						background: #383838;
						position: absolute;
						border-radius: 10rpx;
						z-index: 100;

						.tr-icon {
							position: absolute;
							top: 100rpx;
							width: 0;
							height: 0;
							border: 15rpx solid transparent;
							border-top: 15rpx solid #383838;
						}

						.tr-icon-left {
							left: 15rpx;
						}

						.tr-icon-right {
							right: 15rpx;
						}
					}

					.menu-left {
						top: -100rpx;
						left: 120rpx;

					}

					.menu-right {
						top: -100rpx;
						right: 120rpx;
					}

				}
			}

			.msg-time {
				font-size: 24rpx;
				text-align: center;
				color: #737373;
			}
		}

		.chat-bottom {
			width: 100%;
			height: auto;
			background: #F4F5F7;
			transition: all 0.25s ease;

			.send-msg {
				display: flex;
				align-items: flex-end;
				padding: 16rpx 30rpx;
				width: 100%;
				min-height: 150rpx;
				position: fixed;
				bottom: 0;
				background: #fff;
				transition: all 0.25s ease;

				.uni-textarea {
					width: 100%;
					padding-bottom: 40rpx;
					display: flex;
					align-items: center;

					.icon-style {
						width: 60rpx;
						height: 60rpx;
						padding: 0rpx 10rpx;
					}

					.out_textarea_box {
						width: 65%;
						min-height: 80rpx;
						max-height: 200rpx;
						border-radius: 40rpx;
						background: #f1f1f1;
						display: flex;
						justify-content: center;
						align-items: center;

						textarea {
							width: 86%;
							min-height: 42rpx;
							max-height: 200rpx;
							background: #f1f1f1;
							font-size: 32rpx;
							font-family: PingFang SC;
							color: #333333;
						}
					}
				}
			}
		}

		.more-menu {
			width: 100%;
			min-height: 300rpx;
			margin-top: 150rpx;
			display: none;
			position: fixed;
			bottom: 0rpx;

			.inner-box {
				width: 98%;
				height: 280rpx;
				margin: 10rpx 1%;
				display: flex;

				.menu {
					width: 120rpx;
					height: 130rpx;
					background: #ffffff;
					margin: 20rpx;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.i-style {
						width: 80rpx;
						height: 80rpx;
					}

					.t-style {
						font-size: 22rpx;
						font-weight: 600;
						text-align: center;
					}
				}
			}
		}

		.voice-mask {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.8);

			.inner-mask {
				display: flex;
				flex-direction: column;
				align-items: center;

				.voice-progress-box {
					min-width: 250rpx;
					height: 150rpx;
					margin-top: 60%;
					border-radius: 50rpx;
					background: #4df861;
					position: relative;
					@extend center;

					.third-icon {
						width: 0;
						height: 0;
						border: 15rpx solid transparent;
						border-top: 15rpx solid #4df861;
						position: absolute;
						top: 100%;
						left: 45%;
					}

					.progress-num {
						font-size: 50rpx;
						font-weight: 600;
					}
				}

				.cancel-btn {
					width: 120rpx;
					height: 120rpx;
					clip-path: circle();
					margin-top: 50%;
					background: #080808;
					@extend center;
				}

				.cancelBtn {
					width: 150rpx;
					height: 150rpx;

				}

				.show-tips {
					width: 100%;
					margin-top: 80rpx;
					text-align: center;
					color: white;
					animation: 4s opacity2 1s infinite;
					font-size: 30rpx;
					font-weight: 400;
					font-family: sans-serif;
				}

				@keyframes opacity2 {
					0% {
						opacity: 0
					}

					50% {
						opacity: .8;
					}

					100% {
						opacity: 0;
					}
				}

				.bottom-area {
					position: fixed;
					bottom: 0rpx;
					width: 100%;
					height: 190rpx;
					border-top: #BABABB 8rpx solid;
					border-radius: 300rpx 300rpx 0 0;
					background-image: linear-gradient(#949794, #e1e3e1);
					@extend center;

					.img-style {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}
	}

	view,
	button,
	text,
	input,
	textarea {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	//去除scroll-view的滑动条
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	.send-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		// margin-left: 25rpx;
		width: 100rpx;
		height: 60rpx;
		background: $sendBtnbgc;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 28rpx;
	}
</style>